<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/ace.min.css">
    <style type="text/css">
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .clear:after {
            display: block;
            visibility: hidden;
            clear: both;
            height: 0;
            content: '';
        }
        .alert-text p{
            font-size: 24px;
        }
        .alert-percent{
            padding-top: 56px;
        }
        .btn.alk-btn{
            width: auto;
            /*min-width: 150px;*/
            padding: 0 20px;
        }
    </style>
</head>
<body style="background: #fff;">
<div class="col-xs-12">
    <div class="row">
        <div class="col-xs-12 col-sm-3 widget-container-span ui-sortable">
            <div class="widget-box">
                <div class="widget-header">
                    <h5 class="smaller">报名数</h5>
                    <div class="widget-toolbar">
                        <span class="label label-success">
                            今天<i class="icon-arrow-up"></i>
                        </span>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="widget-main padding-6">
                        <div class="alert alert-info clear" style="min-height: 60px;">
                            <div class="fl alert-text">
                                <p><span id="orgJoinNum">0</span>人</p>
                                <span><span href="javascipt:;">占总报名</span></span>
                            </div>
                            <div class="fr alert-percent"><span id="orgJoinNumPoint">0.00</span>%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 widget-container-span ui-sortable">
            <div class="widget-box">
                <div class="widget-header">
                    <h5 class="smaller">班级圈消息</h5>
                    <div class="widget-toolbar">
                        <span class="label label-success">
                            今天<i class="icon-arrow-up"></i>
                        </span>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="widget-main padding-6">
                        <div class="alert alert-info clear" style="min-height: 60px;">
                            <div class="fl alert-text">
                                <p><span id="orgFendNum">0</span>条</p>
                                <span><span href="javascipt:;">占总消息</span></span>
                            </div>
                            <div class="fr alert-percent">
                                <span id="orgFendNumPoint">0.00</span>%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 widget-container-span ui-sortable">
            <div class="widget-box">
                <div class="widget-header">
                    <h5 class="smaller">考勤总计</h5>
                    <div class="widget-toolbar">
                        <span class="label label-success">
                            今天<i class="icon-arrow-up"></i>
                        </span>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="widget-main padding-6">
                        <div class="alert alert-info clear" style="min-height: 60px;">
                            <div class="fl alert-text">
                                <p><span id="orgAttenceNum">0</span>次</p>
                                <span><span href="javascipt:;">占总考勤</span></span>
                            </div>
                            <div class="fr alert-percent">
                                <span id="orgAttenceNumPoint">0.00</span>%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 widget-container-span ui-sortable">
            <div class="widget-box">
                <div class="widget-header">
                    <h5 class="smaller">收入总额</h5>
                    <div class="widget-toolbar">
                        <span class="label label-success">
                            今天<i class="icon-arrow-up"></i>
                        </span>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="widget-main padding-6">
                        <div class="alert alert-info clear" style="min-height: 60px;">
                            <div class="fl alert-text">
                                <p><span id="orgMoneyNum">0</span>元</p>
                                <span><span href="javascipt:;">占总收入</span></span>
                            </div>
                            <div class="fr alert-percent">
                                <span id="orgMoneyNumPoint">0.00</span>%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin: 0 5px;margin-top: 55px;">
        <div class="alert alert-block alert-success">
            <i class="icon-ok green"></i>
            <strong class="green">数据统计</strong>
        </div>
        <span class="btn btn-app btn-light no-hover alk-btn">
			<span class="line-height-1 smaller-90">已付总额</span><br>
            <span class="line-height-1 bigger-120"><span id="orgMoneyTotal">0</span>元</span>
		</span>
        <span class="btn btn-app btn-light no-hover alk-btn">
			<span class="line-height-1 smaller-90">报名数</span><br>
            <span class="line-height-1 bigger-120"><span id="orgJoinTotal">0</span>人</span>
        </span>
        <span class="btn btn-app btn-light no-hover alk-btn">
			<span class="line-height-1 smaller-90">考勤数</span><br>
            <span class="line-height-1 bigger-120"><span id="orgAttenceTotal">0</span>次</span>
        </span>
        <span class="btn btn-app btn-light no-hover alk-btn">
			<span class="line-height-1 smaller-90">班级圈</span><br>
            <span class="line-height-1 bigger-120"><span id="orgFendTotal">0</span>条</span>
        </span>
        <span class="btn btn-app btn-light no-hover alk-btn">
			<span class="line-height-1 smaller-90">教师人数</span><br>
            <span class="line-height-1 bigger-120"><span id="orgTeacherTotal">0</span>人</span>
        </span>
        <span class="btn btn-app btn-light no-hover alk-btn">
			<span class="line-height-1 smaller-90">学生人数</span><br>
            <span class="line-height-1 bigger-120"><span id="orgStuTotal">0</span>人</span>
        </span>
        <span class="btn btn-app btn-light no-hover alk-btn">
			<span class="line-height-1 smaller-90">课程总数</span><br>
            <span class="line-height-1 bigger-120"><span id="orgCourseTotal">0</span>人</span>
        </span>
        <span class="btn btn-app btn-light no-hover alk-btn">
			<span class="line-height-1 smaller-90">课程报名</span><br>
            <span class="line-height-1 bigger-120"><span id="orgJoinTotal1">0</span>人</span>
        </span>
    </div>
    <div class="row" style="margin-top: 30px;">
        <div class="col-xs-6">
            <div class="alert alert-block alert-success">
                <i class="icon-ok green"></i>
                <strong class="green"> 交互功能使用率 </strong>
            </div>
            <div id="echarts-main" style="width: 600px;height:350px;"></div>
        </div>
        <div class="col-xs-6">
            <div class="alert alert-block alert-success">
                <i class="icon-ok green"></i>
                <strong class="green">  收入比例图 </strong>
            </div>
            <div id="echarts-main-r" style="width: 600px;height:350px;"></div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    var chart = echarts.init(document.getElementById('echarts-main'));
    $(function () {
        $.getJSON(
            "home/index", {},
            function success(json) {
                if(json.code == 200){
                    $('#orgJoinNum').text(json.data.orgJoinNum);
                    if(json.data.orgJoinTotal>0){
                        $('#orgJoinNumPoint').text(json.data.orgJoinNum/1.0/json.data.orgJoinTotal/100);
                    }
                    $('#orgFendNum').text(json.data.orgFendNum);
                    if(json.data.orgFendTotal>0){
                        $('#orgFendNumPoint').text(json.data.orgFendNum/1.0/json.data.orgFendTotal/100);
                    }
                    $('#orgAttenceNum').text(json.data.orgAttenceNum);
                    if(json.data.orgAttenceTotal>0){
                        $('#orgAttenceNumPoint').text(json.data.orgAttenceNum/1.0/json.data.orgAttenceTotal/100);
                    }
                    $('#orgMoneyNum').text(json.data.orgMoneyNum);
                    if(json.data.orgMoneyTotal){
                        $('#orgMoneyNumPoint').text(json.data.orgMoneyNum/1.0/json.data.orgMoneyTotal/100);
                    }
                    //第二部分
                    $('#orgMoneyTotal').text(json.data.orgMoneyTotal_1);
                    $('#orgJoinTotal').text(json.data.orgJoinTotal_1);
                    $('#orgAttenceTotal').text(json.data.orgAttenceTotal_1);
                    $('#orgFendTotal').text(json.data.orgFendTotal_1);
                    $('#orgTeacherTotal').text(json.data.orgTeacherTotal);
                    $('#orgStuTotal').text(json.data.orgStuTotal);
                    $('#orgCourseTotal').text(json.data.orgCourseTotal);
                    $('#orgJoinTotal1').text(json.data.orgJoinTotal_1);
                    //第三部分
                    //左边图表
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data:['考勤','课程报名','机构活动','机构视频','排行榜','兑换商城互动','推荐','发现']
                        },
                        series: [
                            {
                                name:'访问来源',
                                type:'pie',
                                selectedMode: 'single',
                                radius: [0, '60%'],
                                label: {
                                    normal: {
                                        position: 'inner'
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data:[
                                    {value:json.data.attence, name:'考勤'},
                                    {value:json.data.course, name:'课程报名'},
                                    {value:json.data.activity, name:'机构活动'},
                                    {value:json.data.video, name:'机构视频'},
                                    {value:json.data.top, name:'排行榜'},
                                    {value:json.data.convert, name:'兑换商城互动'},
                                    {value:json.data.recommend, name:'推荐'}
                                ]
                            }
                        ]
                    };
                    chart.setOption(option);

                    //右边图表
                    var chartR = echarts.init(document.getElementById('echarts-main-r'));
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data:['课程报名','机构视频','活动报名']
                        },
                        series: [
                            {
                                name:'访问来源',
                                type:'pie',
                                selectedMode: 'single',
                                radius: [0, '60%'],

                                label: {
                                    normal: {
                                        position: 'inner'
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data:[
                                    {value:json.data.orgPartVideoFee, name:'课程报名'},
                                    {value:json.data.orgCourseFee, name:'机构视频'},
                                    {value:json.data.orgActivityFee, name:'活动报名'}
                                ]
                            }
                        ]
                    };
                    chartR.setOption(option);
                }
            }
        )
    })

    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['考勤','课程报名','机构活动','机构视频','排行榜','兑换商城互动','推荐','发现']
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '60%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:1200, name:'考勤'},
                    {value:200, name:'课程报名'},
                    {value:200, name:'机构活动'},
                    {value:200, name:'机构视频'},
                    {value:200, name:'排行榜'},
                    {value:200, name:'兑换商城互动'},
                    {value:200, name:'推荐'},
                    {value:300, name:'发现', selected:true},
                ]
            }
        ]
    };

    chart.setOption(option);


    //右边图表
    var chartR = echarts.init(document.getElementById('echarts-main-r'));

    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['课程报名','机构视频','活动报名']
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '60%'],
                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:1200, name:'课程报名'},
                    {value:200, name:'机构视频'},
                    {value:300, name:'活动报名'},
                ]
            }
        ]
    };
    chartR.setOption(option);
</script>
</html>
